<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
            <!-- slides -->
            <swiper-slide
                 v-for="item of swiperList"
                 :key="item.id"
            >
                <img 
                    class="swiper-img" 
                    :src="item.imgUrl" 
                >
            </swiper-slide>
          
            
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> 
            <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper>
    </div>

</template>
<script>
    export default {
        name:'homeSwiper',
        data(){
            return {
                swiperList:[
                    {
                        id:'1001',
                        imgUrl:'https://pic5.40017.cn/03/000/d5/6b/rB5oQFx4846ATjD9AAMGEUvrZHQ915_520x218_00.jpg'
                    },
                    {
                        id:'1002',
                        imgUrl:'https://pic5.40017.cn/03/000/28/73/rB5oQFxG7M2AOgxwAADChAKgVcA559_520x218_00.jpg'
                    },
                    {
                        id:'1003',
                        imgUrl:'https://pic5.40017.cn/01/000/31/71/rBANC1sy7-iAaElXAADxiWL4LPo263_520x218_00.jpg'
                    },
                    {
                        id:'1004',
                        imgUrl:'https://pic5.40017.cn/03/000/70/63/rBANB1vEK8mANYNrAAEy42kirGs945_520x218_00.jpg'
                    },
                    {
                         id:'1005',
                        imgUrl:'https://pic5.40017.cn/02/001/c9/be/rBLkCFuPUXiAcueUAAMZ98pP6YI670_520x218_00.jpg'
                    },
                     {
                         id:'1006',
                        imgUrl:'https://pic5.40017.cn/03/000/be/6d/rB5oQFv7p8OACgY0AAD75gEXPEw578_520x218_00.jpg'
                    },
                ],
                swiperOption:{
                    pagination:'.swiper-pagination',                   
                    loop:true
                }
            }
        }
    }

</script>

<style lang = 'stylus' scoped>
.wrapper >>> .swiper-pagination-bullet
    background :#fff
.swiper-img
    width :100%

</style>